<template>
      <div class="hoem">
          <!-- 标题 -->
          <p>联盟转诊</p>
          <div class="transfer">
            <!-- 小红点 -->
            <span></span>
            <!-- 跳转到申请会诊 -->
            <router-link to="/consultation" class="tation" @click="taitl">
              <img src="https:s1.ax1x.com/2022/10/14/xdHakD.png" alt="">
            </router-link>
            <h6>申请会诊</h6>
          </div>
          <div class="transfer">
            <router-link class="tation" to="/referral">
              <img src="https://s1.ax1x.com/2022/10/14/xdHNTO.png" alt="">
            </router-link>
            <h6>申请转诊</h6>
          </div>
          <Footers></Footers>
      </div>
     
</template>

<script>
import Footers from '@/components/Footers/Footers.vue'
export default {
  name: "home",
  components:{
    Footers,
  },
  data() {
    return {
        
    }
  },
  mounted(){
    this.taitl();
  },
  methods:{
    taitl(){
      console.log('我是转诊页面');
    }
  }
};
</script>

<style lang="less" scoped>
.hoem{
    height: 42.5rem;
    background: #199ed8;
    overflow: hidden;
    p {
    margin-top: 2.375rem;
    margin-bottom: 5.625rem;
    text-align: center;
    background: #199ed8;
    font-size: 1.125rem;
    color: #fff;
}
}
  
.transfer{
  height: 8.4375rem;
  margin-bottom:6.25rem ;
  background: #199ed8;
  span{
      position:relative;
      top: .6875rem;
      left: 14.3125rem;
      display: inline-block;
      width: .625rem;
      height: .625rem;
      border-radius: 3.125rem;
      background: red;
  }
  .tation{
      display: block;
      width: 6.25rem;
      height: 6.25rem;
      background: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      transform: translate(8.75rem);
  }
  h6{
    text-align: center;
    margin-top: .625rem;
    background: #199ed8;
    color: #fff;
  }
}

</style>